<template>
  <div>
    <el-input
      style="width: 220px;margin-left: 20px"
      placeholder="请输入学生姓名"
      v-model="searchByNameKeyword"
      prefix-icon="el-icon-search"

      clearable>
    </el-input>
    <el-button type="primary" plain @click="searchBtnClick">查询</el-button>
    <el-button type="success" plain @click="searchResetBtnClick">重置</el-button>
    <div style="margin: 20px 0;"></div>
<!--更改签到状态弹框-->
    <el-dialog
      title="更改签到状态"
      :visible.sync="centerDialogVisible"
      show-close="false"
      width="25%"
      :close-on-click-modal='false' :show-close="false"
      center>
      <el-form :model="signForm" :rules="rules" ref="signForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="签到状态" prop="lxSignInStatus" style="height: 80px">
          <el-select v-model="signForm.lxSignInStatus" placeholder="请选择签到状态">
            <el-option
              v-for="item in signStatusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('signForm')">保存</el-button>
          <el-button @click="resetForm('signForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--考勤结果列表-->
    <el-table
      ref="multipleTable"
      border
      :data="signinList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">

      </el-table-column>
      <el-table-column
        prop="date"
        label="序号"
        width="80">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="lxCheckworkId"
        label="考勤发布名"
        width="350">
      </el-table-column>
      <el-table-column
        prop="lxClazzName"
        label="班级" width="250">
      </el-table-column>
      <el-table-column
        prop="lxUserNumber"
        label="学号" width="180">
      </el-table-column>
      <el-table-column
        prop="lxUsername"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="lxSignInStatus"
        label="状态" width="100">
        <template slot-scope="scope">
          <el-tag   v-if="scope.row.lxSignInStatus==1" type="success">已签到</el-tag>
          <el-tag   v-if="scope.row.lxSignInStatus==2" type="danger">迟到</el-tag>
          <el-tag   v-if="scope.row.lxSignInStatus==3" type="warning">请假</el-tag>
          <el-tag   v-if="scope.row.lxSignInStatus==4" type="danger">缺勤</el-tag>

        </template>

      </el-table-column>
      <el-table-column
        prop="lxSignInTime"
        label="时间">
      </el-table-column>


      <el-table-column
        label="操作"
        width="220">
        <template slot-scope="scope">
          <el-button  type="warning" size="small" @click="handleEditStatusClick(scope.row)">编辑</el-button>
          <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" disabled>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom" style="margin-bottom: 0;margin-top: 10px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="currentPage"
        :page-sizes="[8, 10, 20, 40]"
        :page-size="pagesize"
        :background='true'
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total" class="pageControl">
      </el-pagination>
    </div>

  </div>

</template>

<script>
export default {
  name: "CheckWorkResult",
  data(){
    return{
      currentPage:1,
      pagesize:8,
      total:0,
      pageNum:1,
      lxCheckworkId: '',
      searchByNameKeyword:'',
      centerDialogVisible:false,
      signinList:[
        // {
        //   id:'',
        //   lxCheckworkId:'',
        //   lxClazzName:'',
        //   lxUserNumber:'',
        //   lxUsername:'',
        //   lxSignInTime:'',
        //   lxSignInStatus:''
        // }
      ],
      signForm:{
        id:'',
        lxSignInStatus:'',
      },
      rules: {  //表单验证规则
        lxSignInStatus: [
          {required: true, message: '请选择签到状态', trigger: 'blur'},
        ],

      },
      signStatusList: [{
        value: 1,
        label: '已签到'
      }, {
        value: 2,
        label: '迟到'
      }, {
        value: 3,
        label: '请假'
      }, {
        value: 4,
        label: '缺勤'
      }],

    }
  },
  mounted() {
    this.lxCheckworkId = this.$route.params.lxCheckworkId;
    console.log("this.$route.params.lxCheckworkId",this.lxCheckworkId)
    this.load()
  },
  methods:{
    load(){
      var userid=sessionStorage.getItem("LoginName");
      if(this.search){
        console.log("queryBykey")
        this.searchBtnClick()
      }else {
        console.log("queryAll")
        this.$http.get('/signin/querySignByCheckPage',{params:{currentPage:this.currentPage,pagesize:this.pagesize,id:this.lxCheckworkId}}).then(res=>{
          console.log("this.currentPage",this.currentPage)
          this.signinList=res.data.data.records;
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("/signin/queryAllSignPage",res)
          console.log("this.signinList",this.signinList)
        });
      }

    },
    handleSizeChange:function(size){
      //选择 一页展示多少数据时 调用的方法
      this.pagesize = size;
      console.log(size+"****");
      this.currentPage=1;
      this.load()
    },
    handleCurrentPageChange:function(currentPage){
      //点击页面项 的函数响应
      this.currentPage = currentPage;
      console.log("this.currentPage = currentPage;",this.currentPage)
      this.load()
    },
    searchBtnClick(){ //根据条件查询
      console.log("searchBtnClisk",this.searchByClass,this.searchByNameKeyword)
      this.search=true;
      if (this.searchByNameKeyword!=''){
        console.log("searchBtnClisk querySignByCheckAndKeyword")
        this.$http.get('/signin/querySignByCheckAndKeyword',{
          params:{currentPage:this.currentPage,pagesize:this.pagesize,id:this.lxCheckworkId,keyword:this.searchByNameKeyword}
        }).then(res => {
          this.signinList=res.data.data.records;
          this.total=res.data.data.total;
          this.pageNum=res.data.data.pageNum;
          console.log("/checkwork/querySignByCheckAndKeyword", res)
          console.log("this.signinList", this.signinList)
        });

      }else{
        console.log("searchBtnClisk is null")
      }

    },searchResetBtnClick(){  //重置搜索条件
      this.searchByNameKeyword="";
      this.currentPage=1
      this.search=false
      this.load()
    },
    submitForm(signForm) {  //添加/更新表单
      this.$refs[signForm].validate((valid) => {
        if (valid) {
          console.log("signForm",this.signForm);
          this.$http.get('/signin/updateSignStatus',{params:{id:this.signForm.id,lxSignInStatus:this.signForm.lxSignInStatus}}).then(res=>{
            console.log("/signin/updateSignStatus res",res)
            if (res.data.state==200){
              this.$refs[signForm].resetFields();
              setTimeout(this.$message({
                message: '操作成功',
                type: 'success'
              }),1000)

            }else {
              this.$message.error('操作失败');
            }
            this.load();
          });
          this.closeDialog()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(signForm) {
      this.$refs[signForm].resetFields();
      this.closeDialog()
    },
    closeDialog(){
      this.signForm.id=''
      this.signForm.lxSignInStatus=''
      this.centerDialogVisible=false
    },
    handleEditStatusClick(rows){
      console.log("handleEditStatusClick rows",rows);
      this.signForm.id=rows.id;
      this.centerDialogVisible=true;
    },
    handleDeleteClick(rows){  //根据id删除教师
      console.log("delete rows",rows);
      var id=rows.id
      this.$confirm('此操作将永久删除该条签到记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log("postid",id)
        this.$http.post('/checkwork/deleteCheckwork',id).then(res=>{
          console.log("res",res)
          this.load()
          if (res.data.state==200){ //成功删除弹窗
            setTimeout(this.$message({
              type: 'success',
              message: '删除成功!'
            }),1000)
          }else {
            this.$message.error('删除失败！');
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },




  },
}
</script>

<style scoped>

</style>
